<template>
  <div class="container">
    <div class="countdown on">
      <div class="title">距离本轮竞价结束还剩</div>
      <!-- 本轮竞价已结束 -->
      <div class="time">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Days</div>
        </div>
        <img class="maohao" src="@/assets/images/maohao.png" alt="">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Hours</div>
        </div>
        <img class="maohao" src="@/assets/images/maohao.png" alt="">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Minutes</div>
        </div>
        <img class="maohao" src="@/assets/images/maohao.png" alt="">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Seconds</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="price-div">
        <div class="til">
          当前报价：<span>100%</span>
        </div>
        <div class="right">
          <span>出价：</span>
          <div class="num">
            <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
            <span class="unit">%</span>
          </div>
        </div>
      </div>
      <el-button class="price-btn" type="primary">立即出价</el-button>
      <div class="tips-div">
        <div class="ing-tips">
          <div class="text">
            本轮竞价当前参与方最低报价为 <span>85.65%</span>,您不是最低报价
          </div>
          <div class="refresh">
            <i class="el-icon-refresh"></i>刷新</div>
        </div>
        <div class="small-tips">当最后2分钟内有新的有效报价,本轮竞价结束时间基于收到报价的的时间后延2分钟。后续收到新的有效报价,继续依此规则执行。</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:''
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  .countdown{
    width: 100%;
    min-height: 430px;
    background: url('~@/assets/images/bg-blue.png') no-repeat top;
    background-size: 100% 100%;
    color: #fff;
    padding: 40px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    &.on{
    background: url('~@/assets/images/bg-orange.png') no-repeat top;
    background-size: 100% 100%;
    }
    .title{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 30px;
      margin-bottom: 40px;
      &::before{
        content: '';
        display: inline-block;
        width: 204px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
        margin-right: 50px;
      }
      &::after{
        content: '';
        display: inline-block;
        width: 204px;
        height: 2px;
        background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
        margin-left: 50px;
      }
    }
    .time{
      display: flex;
      justify-content: center;
      .maohao{
        width: 20px;
        object-fit: contain;
        margin: 0 20px;
        margin-top: -20px;
      }
      .item{
        .number{
          width: 160px;
          text-align: center;
          font-family: JCHEadA;
          font-size: 120px;
          background: url('~@/assets/images/daojishi-bg.png') no-repeat center;
          background-size: contain;
        }
        .text{
          text-align: center;
          font-size: 28px;
          font-weight: 300;
          font-family: PingFangSC, PingFang SC;
        }
      }
    }
  }
  .bottom{
    background: #FFFFFF;
    height: calc(100vh - 430px - 54px);
    text-align: center;
    padding: 74px;
    .price-div{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-left: -48px;
      .til{
        span{
          color: #D81E1E;
        }
      }
      .right{
        display: flex;
        align-items: center;
        margin-left: 48px;
        .num{
          position: relative;
          margin-left: 50px;
          height: 40px;
          display: flex;
          align-items: center;
        }
        ::v-deep .el-input-number .el-input__inner{
          padding-left: 15px;
        }
        ::v-deep .el-input-number__decrease{
          left: -48px;
          border-right: none;
          border: 1px solid #D9D9D9;
          background: #FFFFFF;
          border-radius: 3px;
          font-size: 18px;
        }
        ::v-deep .el-input-number__increase{
          right: -48px;
          border-left: none;
          border: 1px solid #D9D9D9;
          background: #FFFFFF;
          border-radius: 3px;
          font-size: 18px;
        }
        .unit{
          position: absolute;
          right: 1px;
          top: 1px;
          height: 38px;
          width: 44px;
          background: #DCDCDC;
          font-size: 16px;
          text-align: center;
          line-height: 40px;
          color: #999999;
          border-radius: 0 3px 3px 0;
        }
      }
    }
    .price-btn{
      width: 590px;
      height: 48px;
      border-radius: 5px;
      font-size: 22px;
      margin: 60px 0 30px;
    }
    .ing-tips{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #666666;
      span{
        color: #D81E1E;
      }
      .refresh{
        color: #006FE1;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .small-tips{
      font-size: 12px;
      margin-top: 6px;
      color: rgba(0,0,0,0.85);
    }
  }
  @media (max-width:1512px) {
    .bottom{
      padding: 54px;
      .price-btn{
        margin: 48px 0 24px;
      }
    }
  }
}
</style>